<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>办理入住</title>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <style>
        body { font-family: Arial; background: #f5f5f5; }
        .container { max-width: 600px; margin: 40px auto; background: #fff; border-radius: 8px; box-shadow: 0 2px 10px #ccc; padding: 30px; }
        .title { text-align: center; font-size: 26px; margin-bottom: 24px; color: #333; }
        .form-group { margin-bottom: 18px; }
        .form-group label { display: block; margin-bottom: 6px; color: #333; font-weight: 500; }
        .form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; }
        .btn { width: 100%; padding: 12px; background: #5a3ec8; color: #fff; border: none; border-radius: 4px; font-size: 16px; cursor: pointer; }
        .btn:hover { background: #764ba2; }
        .order-list { margin-bottom: 18px; }
        .order-item { border: 1px solid #e0e0e0; border-radius: 6px; padding: 12px; margin-bottom: 10px; background: #f8f9fa; cursor: pointer; }
        .order-item.selected { border: 2px solid #5a3ec8; background: #e8f4fd; }
        .room-select { margin-bottom: 18px; }
        .result { margin-top: 18px; text-align: center; font-size: 16px; }
        .success { color: #28a745; }
        .error { color: #e74c3c; }
    </style>
</head>
<body class="main-bg">
  <div class="main-card">
    <a href="adminindex.html" class="back-home-btn">返回首页</a>
    <h2 class="main-title">办理入住</h2>
    <div class="form-group">
      <label>用户手机号后四位：</label>
      <input type="text" id="phoneSuffix" maxlength="4" placeholder="如 8888">
    </div>
    <button class="main-btn" id="searchOrderBtn">查询未入住订单</button>
    <div class="order-list" id="orderList"></div>
    <div id="roomSelectArea" style="display:none;">
      <div class="form-group">
        <label>选择空闲房号：</label>
        <select id="roomNumberSelect"></select>
      </div>
      <div class="form-group">
        <label>顾客身份证信息：</label>
        <input type="text" id="guestInfo" placeholder="如：身份证号+姓名">
      </div>
      <button class="main-btn" id="checkinBtn">办理入住</button>
    </div>
    <div class="result" id="resultMsg"></div>
  </div>
  <script>
        let selectedOrder = null;
        let orderList = [];

        // 查询未入住订单
        $('#searchOrderBtn').on('click', function() {
            const suffix = $('#phoneSuffix').val().trim();
            $('#resultMsg').text('');
            $('#orderList').empty();
            $('#roomSelectArea').hide();
            selectedOrder = null;
            if (!/^[0-9]{4}$/.test(suffix)) {
                $('#resultMsg').text('请输入正确的手机号后四位').addClass('error');
                return;
            }
            $.ajax({
                url: 'http://localhost:8080/api/order/listByPhoneSuffix',
                type: 'GET',
                data: { phoneSuffix: suffix },
                success: function(data) {
                    orderList = data || [];
                    if (orderList.length === 0) {
                        $('#orderList').html('<div class="error">未找到相关未入住订单</div>');
                        return;
                    }
                    let html = '';
                    orderList.forEach((order, idx) => {
                        html += `
                            <div class="order-item" data-idx="${idx}">
                                <strong>订单号：</strong>${order.orderId}<br>
                                <strong>用户名：</strong>${order.username}<br>
                                <strong>联系方式：</strong>${order.contactPhone}<br>
                                <strong>入住时间：</strong>${order.checkInTime}<br>
                                <strong>房型ID：</strong>${order.roomTypeId}
                            </div>
                        `;
                    });
                    $('#orderList').html(html);

                    // 订单点击选择
                    $('.order-item').on('click', function() {
                        $('.order-item').removeClass('selected');
                        $(this).addClass('selected');
                        const idx = $(this).data('idx');
                        selectedOrder = orderList[idx];
                        loadFreeRooms(selectedOrder.roomTypeId);
                    });
                },
                error: function() {
                    $('#orderList').html('<div class="error">查询失败，请重试</div>');
                }
            });
        });

        // 加载空闲房号
        function loadFreeRooms(roomTypeId) {
            $('#roomNumberSelect').empty();
            $('#guestInfo').val('');
            $('#resultMsg').text('');
            $.ajax({
                url: 'http://localhost:8080/api/roomnumber/freeByType',
                type: 'GET',
                data: { roomTypeId: roomTypeId },
                success: function(data) {
                    if (!data || data.length === 0) {
                        $('#roomNumberSelect').html('<option value="">无空闲房间</option>');
                        $('#roomSelectArea').show();
                        $('#checkinBtn').prop('disabled', true);
                        return;
                    }
                    let html = '<option value="">请选择房号</option>';
                    data.forEach(room => {
                        html += `<option value="${room.roomId}">${room.roomNumber}</option>`;
                    });
                    $('#roomNumberSelect').html(html);
                    $('#roomSelectArea').show();
                    $('#checkinBtn').prop('disabled', false);
                },
                error: function() {
                    $('#roomNumberSelect').html('<option value=\"\">加载失败</option>');
                    $('#roomSelectArea').show();
                    $('#checkinBtn').prop('disabled', true);
                }
            });
        }

        // 办理入住
        $('#checkinBtn').on('click', function() {
            const roomId = $('#roomNumberSelect').val();
            const guestInfo = $('#guestInfo').val().trim();
            if (!selectedOrder) {
                $('#resultMsg').text('请先选择订单').addClass('error');
                return;
            }
            if (!roomId) {
                $('#resultMsg').text('请选择房号').addClass('error');
                return;
            }
            if (!guestInfo) {
                $('#resultMsg').text('请填写顾客身份证信息').addClass('error');
                return;
            }
            $.ajax({
                url: 'http://localhost:8080/api/order/checkin',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({
                    orderId: selectedOrder.orderId,
                    roomId: parseInt(roomId),
                    guestInfo: guestInfo
                }),
                success: function(res) {
                    if (res === 'success') {
                        $('#resultMsg').text('办理入住成功！').removeClass('error').addClass('success');
                        $('#roomSelectArea').hide();
                        $('#orderList').empty();
                    } else {
                        $('#resultMsg').text('办理入住失败，请重试').removeClass('success').addClass('error');
                    }
                },
                error: function() {
                    $('#resultMsg').text('请求失败，请稍后重试').removeClass('success').addClass('error');
                }
            });
        });
    </script>
    <style>
    .main-bg {
      min-height: 100vh;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      padding: 0;
      margin: 0;
    }
    .main-card {
      background: #fff;
      border-radius: 24px;
      box-shadow: 0 8px 32px rgba(90,62,200,0.12);
      max-width: 600px;
      margin: 60px auto 0 auto;
      padding: 40px 32px 32px 32px;
    }
    .main-title {
      font-size: 28px;
      font-weight: 800;
      color: #5a3ec8;
      margin-bottom: 18px;
      letter-spacing: 1px;
      text-align: center;
    }
    .form-group {
      margin-bottom: 18px;
    }
    .form-group label {
      display: block;
      margin-bottom: 6px;
      color: #333;
      font-weight: 500;
    }
    .form-group input, .form-group select {
      width: 100%;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: 15px;
    }
    .main-btn {
      width: 100%;
      padding: 12px;
      background: linear-gradient(90deg, #764ba2 0%, #667eea 100%);
      color: #fff;
      border: none;
      border-radius: 16px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      margin-bottom: 10px;
      transition: background 0.2s, box-shadow 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .main-btn:hover {
      background: linear-gradient(90deg, #a18cd1 0%, #fbc2eb 100%);
      color: #5a3ec8;
    }
    .order-list {
      margin-bottom: 18px;
    }
    .order-item {
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      padding: 14px;
      margin-bottom: 10px;
      background: #f8f9fa;
      cursor: pointer;
      transition: border 0.2s, background 0.2s;
    }
    .order-item.selected {
      border: 2px solid #5a3ec8;
      background: #e0e7ff;
    }
    .result {
      margin-top: 18px;
      text-align: center;
      font-size: 16px;
    }
    .success { color: #28a745; }
    .error { color: #e74c3c; }
    .back-home-btn {
      display: inline-block;
      margin: 0 0 18px 0;
      background: #f5f5f5;
      color: #5a3ec8;
      border: none;
      border-radius: 18px;
      padding: 8px 28px;
      font-size: 16px;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, color 0.2s;
      box-shadow: 0 2px 8px #e0d7f7;
    }
    .back-home-btn:hover {
      background: #e0e7ff;
      color: #333;
    }
    @media (max-width: 700px) {
      .main-card { padding: 18px 4vw; }
      .main-title { font-size: 20px; }
      .form-group input, .form-group select { font-size: 14px; }
    }
  </style>
</body>
</html> 